//轮播图
.banner{
  position:relative;
  overflow:hidden;
  ul{
    width:1000%;position:relative;
    li{
      width:10%;float:left;
      img{
        width:1200px;margin:0 auto;
      }
    }
  }
  span{
    width:82px;height:154px;cursor:pointer;display:none;
    position:absolute;top:50%;margin-top:-77px;
    &.left{
      left:40px;
      background:url('../img/banner_left_icon.png');
    }
    &.right{
      right:40px;
      background:url('../img/banner_right_icon.png');
    }
  }
  ol{
    width:168px;position:absolute;left:50%;margin-left:-84px;bottom:30px;
    li{
      width:12px;height:12px;border-radius:50%;cursor:pointer;
      background: #5c5b5b;float:left;margin:0 22px;
      &.on{
        background: #dfa973;
      }
    }
  }
}
//菜单初始时是收缩的
header{
  .bottom{
    .container{
      dl{
        dd{
          display:none;
        }
      }
    }
  }
}
//主体部分
section{
  width:1200px;
  margin:0 auto 66px;
  overflow:hidden;
  border-bottom:1px solid #000;

  .leftsidebar{
    padding:16px 0 0 0;
    float:left;
    h2{
      font-size:14px;
      color:#000;
      margin-bottom:20px;
    }
    .category{
      padding:16px 0 28px 38px;
      font-size:14px;
      width:200px;
      border-top:1px solid #000;
      border-bottom:1px solid #000;
      dl{
        margin-top:22px;
        dt{
          position:relative;
          span{
            cursor:pointer;
          }
          b{
            font-size:22px;
            width:16px;
            height:16px;
            transform:rotate(0deg);
            line-height:14px;
            position:absolute;
            top:50%;
            left:-30px;
            margin-top:-9px;
          }
        }
        dd{
          display:block;
          margin-top:12px;
          padding-left:4px;
          ol{
            li{
              margin-top:6px;
              &:first-child{
                margin-top:0;
              }
              a{
                font-size:14px;
                color:#908e8e;
              }
            }
          }
        }
        &:first-child{
          margin-top:0;
        }
        &.unfold{
          padding-bottom:0;
          dt{
            b{
              transform:rotate(90deg);
            }
          }
        }
      }
    }
    .hotsale{
      width:144px;
      margin-left:30px;
      h1{
        font-size:14px;
        color:#000;
        margin:14px 0 46px;
      }
      ul{
        margin-left:18px;
        width:126px;
        text-align:center;
        li{
          width:100%;
          font-size:12px;
          margin-top:70px;
          .hotshop{
            display:block;
            margin-bottom:2px;
          }
          div{
            .price{
              color:#ff9b94;
              i{
                margin-left:2px;
                color:#ff9b94;
              }
            }
            .workoff{
              margin-left:10px;
              color:#cbc9c9;
              i{
                margin-left:8px;
                color:#000;
              }
            }
          }
          &:first-child{
            margin-top:0;
          }
        }
      }
      h3{
        margin-bottom:4px;
        a{
          display:inline-block;
          font-size:12px;
        }
      }
      i{
        font-size:12px;
      }
      img{
        width:126px;
        height:120px;
        margin:0 auto;
      }
    }
    .adver{
      margin:60px 0 0 30px;
      width:180px;
      a{
        display:block;
        margin-top:38px;
        img{
          width:180px;
          height:212px;
        }
        &:first-child{
          margin-top:0;
        }
      }
    }
  }
  .container{
    float:right;
    width:844px;
    margin-top:55px;
    border-top:1px solid #000;
    .selected{
      float:left;
      width:106px;
      font-size:12px;
      padding:14px 0 14px 50px;
      text-align:left;
      span{
        display:block;
        line-height:12px;
        border-right:1px solid #8d8d8d;
      }
    }
    .unlimit{
      float:left;
      width:132px;
      font-size:12px;
      padding:14px 0;
      text-align:center;
      span{
        display:block;
        line-height:12px;
        cursor:pointer;
      }
    }
    .select{
      overflow:hidden;
      text-align:center;
      border-bottom:1px solid #d4d4d4;
      .note{
        float:left;
        width:568px;
        height:40px;
        padding-left:46px;
        display:flex;
        align-items:center;
        a{
          padding:6px 8px;
          display:inline-block;
          padding-right:20px;
          background:#ff9b94;
          position:relative;
          margin-right:4px;
        }
        b{
          font-size:8px;
          color:#fff;
          position:absolute;
          line-height:6px;
          top:6px;
          right:8px;

        }
        .shopname{
          span{
            color:#fff;
            display:block;
            font-size:12px;
            line-height:12px;
          }
        }
      }
      .empty{
        width:70px;
        color:#908b8b;
        cursor:pointer;
        float:left;
        font-size:12px;
        padding:12px 0;
      }
    }
    .price{
      border-bottom:1px solid #d4d4d4;
      .range{
        width:456px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        height:40px;
        span{
          display:block;
          font-size:12px;
          cursor:pointer;
        }
      }
    }
    .brand{
      overflow:hidden;
      border-bottom:1px solid #d4d4d4;
      .brandcate{
        float:left;
        width:488px;
        height:40px;
        overflow:hidden;
        span{
          display:block;
          float:left;
          font-size:12px;
          padding:12px 0;
          margin-right:14px;
          cursor:pointer;
        }
      }
      .more{
        float:left;
        text-align:center;
        font-size:12px;
        line-height:40px;
        position:relative;
        color:#ff9b94;
        width:68px;
        span{
          cursor:pointer;
        }
        i{
          position:absolute;
          font-size:12px;
          right:10px;
          top:11px;
        }
      }
    }
    .texture{
      border-bottom:1px solid #d4d4d4;
      .texturecate{
        width:428px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        height:40px;
        span{
          display:block;
          font-size:12px;
          cursor:pointer;
        }
      }
    }
    .advancesearch{
      width:120px;
      line-height:30px;
      border:1px solid #d4d4d4;
      border-top-color:#fff;
      text-align:center;
      font-size:12px;
      margin:0 auto;
      position:relative;
      top:-1px;
      cursor:pointer;
    }
    .selector{
      border-bottom:1px solid #d4d4d4;
      width:100%;
      ul{
        overflow:hidden;
        width:200px;
        margin:0 auto;
        li{
          float:left;
          width:100px;
          text-align:center;
          border-bottom:1px solid transparent;
          line-height:14px;
          padding:28px 0;
          a{
            display:block;
            font-size:14px;
            line-height:14px;
          }
          &:first-child{
            a{
              border-right:1px solid #d4d4d4;
            }
          }
          &.current{
            a{
              color:#ffa59e;
            }
            border-bottom-color:#ffa59e;
          }
        }
      }
    }
    .sort{
      margin-top:24px;
      padding:12px 0;
      line-height:12px;
      overflow:hidden;
      border-bottom:1px solid #000;
      .left{
        float:left;
        ul{
          margin-left:14px;
          width:222px;
          overflow:hidden;
          display:flex;
          flex-wrap:wrap;
          justify-content:space-between;
          li{
            font-size:12px;
            width:36px;
            position:relative;
            b{
              width:8px;
              height:8px;
              display:block;
              font-size:8px;
              margin-left:2px;
              position:absolute;
              right:1px;
              top:0px;
              background:url('../img/L_icon.png');
              transform: rotateY(180deg) rotate(180deg);
            }
            &.current{
              color:#ffa59e;
              b{
                right:3px;
                top:4px;
                transform: rotate(-10deg);
              }
            }
          }
        }
      }
      .right{
        float:right;
        overflow:hidden;
        font-size:14px;
        span{
          float:left;
          display:block;
          b{
            margin-right:6px;
          }
        }
        i,b{
          font-size:14px;
          line-height:12px;
        }
          .shopnum{
            text-align:left;
            width:106px;
            margin-right:28px;
            line-height:12px;
            border-right:1px solid #424242;
            i{
              color:#ff0000;
            }
          }
      }
    }
    .goods{
      margin-bottom:70px;
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      li{
        margin:20px 0;
        width:228px;
        font-size:16px;
        text-align:center;
        border-bottom:1px solid #d2d2d2;
        &:hover{
          border-bottom:4px solid #ffa59e;
          div{
            margin-bottom:13px;
          }
        }
        a,i{
          font-size:16px;
        }
        a{
          display:block;
          margin-bottom:10px;
          img{
            width:228px;
            height:228px;
          }
        }
        .gsprice{
          color:#ffa59e;
          display:inline-block;
          margin-bottom:6px;
          i{
            color:#ffa59e;
          }
        }
        h2{
          margin-bottom:6px;
        }
        div{
          margin-bottom:16px;
        }
        .gworkoff{
          color:#969595;
          margin-right:14px;
          i{
            color:#000;
            margin-left:10px;
          }
        }
        .gcomment{
          color:#969595;
          i{
            color:#000;
            margin-left:10px;
          }
        }
      }
    }
    .page{
      width:348px;margin-left:496px;
      overflow:hidden;
      margin-bottom:60px;
      a{
        width:40px;height:40px;border:1px solid #b5b5b5;float:left;
        &.pre{
          position:relative;
          margin-right:12px;
        }
        &.pre:after{
          content:'';width:0;height:0;display:block;
          border:8px solid transparent;border-right-color:#000;
          position:absolute;
          left:20%;top:50%;margin-top:-8px;
        }
        &.next{
          position:relative;margin-right:0;
          margin-left:12px;
        }
        &.next:after{
          content:'';width:0;height:0;display:block;
          border:8px solid transparent;border-left-color:#000;
          position:absolute;
          right:20%;top:50%;margin-top:-8px;
        }
      }
      ol{
        float:left;
        li{
          text-align:center;
          float:left;width:40px;line-height:40px;border:1px solid #b5b5b5;
          margin:0 3px;cursor:pointer;
          span{
            position:relative;top:-4px;
          }
          &:hover{
            background:#ff9b94;
          }
        }
      }
    }
  }
}
.right_nav{
  top:1167px;
}
